<template>
  <el-card
    class="box-card"
    shadow="never"
    v-for="(item, index) in props.foo"
    :key="index"
  >
    <div style="float: left; margin-top: -10px">
      <slot name="returnIcon"></slot>
    </div>
    <div class="card-header">
      <el-avatar
        :size="50"
        :src="item.userHead"
        @click="toPerson(item.userId)"
      />
      <div class="info">
        <div>
          <text class="name">{{ item.userName }}</text>
        </div>
        <text class="time">{{ item.time }}</text>
      </div>
      <div style="margin-left: 500px; display: flex">
        <div v-if="myId != item.userId">
          <el-button
            v-if="!item.pickState"
            round
            style="border-color: #ffaa33; color: #ffaa33"
            @click="guanZhu(item.userId, item.userHead, item.userName)"
            >+关注</el-button
          >
          <el-button
            v-if="item.pickState"
            round
            style="border-color: #666666; color: #666666"
            @click="guanZhu(item.userId, item.userHead, item.userName)"
            >已关注</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <weiGui
            :userId="item.userId"
            :dynamicId="item.dynamicId"
            :userName="item.userName"
          ></weiGui>
        </div>
      </div>
    </div>
    <br />
    <br />
    <div>
      <text class="textcontent" @click="detailCard(item.dynamicId)">{{
        item.text
      }}</text>
    </div>
    <br />
    <div class="images" v-if="true">
      <el-image
        class="iamges"
        v-for="(item_image, index) in item.imageList"
        :key="index"
        :src="item_image.path"
        :preview-src-list="item.imagePathList"
        fit="cover"
        style="
          width: 200px;
          height: 160px;
          margin: 0 5px;
          float: left;
          margin-top: 10px;
        "
      />
    </div>
    <div style="margin-top: 20px; width: 720px; float: left">
      <div class="diucion">
        <el-icon @click="detailCard(item.dynamicId)"><ChatRound /></el-icon>
        <text>{{ item.reviews }}</text>
      </div>
      <div class="iconlike">
        <div
          v-if="!item.likeState"
          @click="changeiconseen(index, item.dynamicId)"
        >
          <dislike></dislike>
          <text>{{ item.likes }}</text>
        </div>
        <div
          v-if="item.likeState"
          @click="changeiconseen(index, item.dynamicId)"
        >
          <likeZ></likeZ>
          <text>{{ item.likes }}</text>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { ChatRound } from '@element-plus/icons-vue'
import dislike from '../likeIcon/dislike.vue'
import likeZ from '../likeIcon/likeZ.vue'
import weiGui from '../likeIcon/weiGui.vue'
import router from '@/router'
import axios from 'axios'
const emit = defineEmits(['changeLike', 'changeLike1', 'focusShua'])
const props = defineProps(['foo'])
const myId = ref(localStorage.getItem('userSelfId'))
function detailCard(dynamicId) {
  router.push('detailPage?dynamicId=' + dynamicId)
}

function changeiconseen(index, dynamicId) {
  emit('changeLike', index)
  emit('changeLike1')
  axios({
    url: 'http://localhost:8080/likes/dynamic',
    method: 'put',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      dynamicId: dynamicId
    }
  }).then(function (res) {})
}

function guanZhu(otherId, otherHead, otherName) {
  axios({
    url: 'http://localhost:8080/pick',
    method: 'post',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      otherId: otherId,
      otherHead: otherHead,
      otherName: otherName
    }
  }).then(function (res) {})

  emit('focusShua')
  console.log('你好呀呀呀')
}

function toPerson(userId) {
  router.push('myMessage?userId=' + userId)
}
</script>

<style lang="scss">
.card-header {
  justify-content: space-between;
  align-items: center;
  float: left;
  display: flex;
  height: 50px;
  margin-top: 20px;
  .info {
    .time {
      font-size: 4px;
      color: darkgrey;
      float: left;
      margin-top: -10px;
    }
    .name {
      font-family: '黑体';
      color: #000000;
      font-size: large;
      width: 200px;
      margin-top: -5px;
    }
  }
}
.textcontent {
  text-align: left;
  float: left;
  font-size: 18px;
  margin-left: 25px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 68px;
}

.box-card {
  padding: 20px;
  width: 70%;
  margin: auto;
  height: auto;
}
.images {
  float: left;
  width: 760px;
  margin-left: 25px;
}
.bigbox1 {
  width: 70%;
  margin: auto;
}
.iconlike {
  margin-top: -1px;
  float: left;
  padding-left: 20px;
}
.diucion {
  float: left;
  padding-left: 20px;
}
</style>
